<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MyAccount</title>
    <link rel="StyleSheet" href="../css/account.css" type="text/css" media="screen" />
    <link rel="StyleSheet" href="../css/common.css" type="text/css" media="screen" />
    <script src="https://kit.fontawesome.com/58cb2985af.js" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>
<body>
<div th:replace="/common/top"></div>
    <div id="w">
        <div id="topNavContent">
                <div class="radio_option" id="allContent">
                    个人中心
                </div>
        </div>

            <div id="coreContent">
                <form action="/user/changeInfo" method="post">
                    <div class="accountTitle">User Information</div>
                    <table>
                        <tr>
                            <td class="accountTableTitle">User ID:</td>
                            <td class="accountTableContent">
                                <span th:text="${userInfo.username != null ? userInfo.username : ''}" name="username" >username</span>
                            </td>
                        </tr>
<!--                        <tr>-->
<!--                            <td class="accountTableTitle">New password:</td>-->
<!--                            <td class="accountTableContent"><input type="text" name="password"></td>-->
<!--                        </tr>z-->
<!--                        <tr>-->
<!--                            <td class="accountTableTitle">Repeat password:</td>-->
<!--                            <td class="accountTableContent"><input type="text" name="rpassword"></td>-->
<!--                        </tr>-->
<!--                        <tr>-->
<!--                            <td class="accountTableTitle">Security Code:</td>-->
<!--                            <td class="accountTableContent"><input type="text" name="code" id="code"></td>-->
<!--                            <img alt="单击图片刷新！" class="pointer" src="/common/kaptcha"-->
<!--                                 onclick="this.src='/common/kaptcha?d='+new Date()*1">-->
<!--                        </tr>-->
                    </table>
                    <div th:replace="user/includeAccountFields"></div>

                    <div class="accountTitle">Address Information</div>
                    <table>
                        <tr>
                            <td class="accountTableTitle">Address 1:</td>
                            <td class="accountTableContent"><input class="accountInfo" th:value="${userInfo.addr1 !=null ? userInfo.addr1 : ''}" name="addr1"/></td>
                        </tr>
                        <tr>
                            <td class="accountTableTitle">Address 2:</td>
                            <td class="accountTableContent"><input class="accountInfo" th:value="${userInfo.addr2 !=null ? userInfo.addr2 : ''}" name="addr2"/></td>
                        </tr>
                        <tr>
                            <td class="accountTableTitle">City:</td>
                            <td class="accountTableContent"><input class="accountInfo" th:value="${userInfo.city !=null ? userInfo.city : ''}" name="city"/></td>
                        </tr>
                        <tr>
                            <td class="accountTableTitle">State:</td>
                            <td class="accountTableContent"><input class="accountInfo" th:value="${userInfo.state !=null ? userInfo.state : ''}" name="state"/></td>
                        </tr>
                        <tr>
                            <td class="accountTableTitle">Zip:</td>
                            <td class="accountTableContent"><input class="accountInfo" th:value="${userInfo.zip !=null ? userInfo.zip : ''}"  name="zip"/></td>
                        </tr>
                        <tr>
                            <td class="accountTableTitle">Country:</td>
                            <td class="accountTableContent"><input class="accountInfo" th:value="${userInfo.country !=null ? userInfo.country : ''}" name="country"/></td>
                        </tr>
                    </table>

                    <div id="saveContent">
                        <input id="save" type="submit" name="editAccountForm" value="Save Account Information">
                    </div>
                </form>
            </div>

    </div>
<div th:replace="/common/bottom"></div>
</body>
</html>